<template>
  <div>


      <!--统计信息-table的全部统计-->
      <span style="color: red; font-size: 20px;">收款共计：{{
          totalCountOfCollectionList
        }}条，金额：{{ totalAmountOfCollectionList }}元，计费量：{{ totalWorkNumOfCollectionList }}</span>


      <!--table展示，最大600px高度，有滚动条-->
      <el-table :data="collectionList"
                v-loading="collectionListLoading"
                border
                @selection-change="handleSelectionChange"
                height="690px"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="billCollectionId" align="center" prop="billCollectionId" v-if="isInDevMode"/>
        <el-table-column label="费目" align="center" prop="basicFeeName"/>
        <el-table-column label="服务过程" align="center" prop="feeServiceName"/>
        <el-table-column label="金额(含税)" align="center" prop="amount"/>
        <el-table-column label="币种" align="center" prop="currency"/>
        <!--税率带有前端筛选功能-->
        <el-table-column label="税率" align="center" prop="taxRate"
                         :filters="taxRateSetInCollectionList"
                         :filter-method="taxRateFilter">
          <template slot-scope="scope">
            <!--税率 taxRate  6代表6%，12代表12% 需要在数字后面加上%-->
            <span>{{ scope.row.taxRate }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="业务数据" align="center" prop="busData"/>
        <el-table-column label="单价" align="center" prop="unitPrice"/>
        <el-table-column label="数量" align="center" prop="workNum"/>
        <el-table-column label="业务单号" align="center" prop="billNo"/>
        <el-table-column label="大船名/航次" align="center" prop="shipName"/>
        <el-table-column label="货名/货类" align="center" prop="cargoName"/>
        <el-table-column label="起运地/目的地" align="center" prop="port"/>
        <el-table-column label="进出口类型" align="center" prop="inOut"/>
        <el-table-column label="货物相关方" align="center" prop="consignee"/>
        <el-table-column label="业务开始时间" align="center" prop="busStartTime"/>
        <el-table-column label="业务结束时间" align="center" prop="busEndTime"/>
        <el-table-column label="经办部门" align="center" prop="deptName"/>
        <el-table-column label="订单号" align="center" prop="taxRate">
          <template slot-scope="scope">
            <!--跳转到通用orderDetail，如：http://localhost/bus/generalOrderDetail/32915-->
            <router-link
              :to="{path: '/bus/generalOrderDetail/' + scope.row.orderId ,query:{}}"
              class="link-type">
              <span>{{ scope.row.orderNumber }}</span>
            </router-link>
          </template>
        </el-table-column>
        <el-table-column label="收款合同" align="center" prop="taxRate">
          <template slot-scope="scope">
            <router-link :to="'/con/condetail/data/' + scope.row.conId" class="link-type">
              <span>{{ scope.row.conCodeCol }}/{{ scope.row.conNameCol }}</span>
            </router-link>
          </template>
        </el-table-column>

        <el-table-column label="关联对账单" align="center" prop="statementNo"/>
        <el-table-column label="关联结算单" align="center" prop="settlementNo"/>
        <el-table-column label="费项ID" align="center" prop="billCollectionId"/>
        <el-table-column label="状态" align="center" prop="collectStatus" :formatter="collectionStatusFormatter"/>
        <el-table-column label="汇率" align="center" prop="exchangeRate"/>
        <el-table-column label="换算金额" align="center" prop="exchangeAmount"/>
        <el-table-column label="conId" align="center" prop="conId" v-if="isInDevMode"/>
        <el-table-column label="orderId" align="center" prop="orderId" v-if="isInDevMode"/>
        <el-table-column label="费项备注" align="center" prop="remark"/>
        <el-table-column label="最后修改时间" align="center" prop="updateTime" width="180">
          <template slot-scope="scope">
            <span>{{ timeFormatter(scope.row.updateTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="最后修改人" align="center" prop="updateName"/>
      </el-table>

      <!--统计信息-勾选信息的统计-->
        <span style="color: red; font-size: 20px;">勾选共计：{{
            totalCountOfSelectedCollectionList
	        }}条，金额：{{ totalAmountOfSelectedCollectionList }}元，计费量：{{ totalWorkNumOfSelectedCollectionList }}</span>



  </div>
</template>

<script>



export default {
  name: "colListTable",
  props: {

    // 父组件传递过来的收款List
    collectionList: {
      type: Array,
      required: true,
    },

    collectionListLoading: {
      type: Boolean,
      default: false,
    }


  },
  data() {
    return {

      // 作弊码：从localStorage中获取是否处于开发模式，值为true或false
      isInDevMode: localStorage.getItem('isInDevMode') === 'true',

      // 收款状态的options
      collectionStatusOptions: [],
      // 选中的收款
      selectedCollections: [],
    }
  },
  computed: {

    // 税率taxRate的set in collectionList，用于表格中的筛选
    taxRateSetInCollectionList() {
      let arr = []
      this.collectionList.forEach(item => {
        arr.push(item.taxRate)
      })
      arr = [...new Set(arr)]
      arr = arr.map(item => {
        return {
          text: item,
          value: item
        }
      })
      return arr
    },
    // 总金额：全部收款 collectionList中amount的sum
    totalAmountOfCollectionList() {
      // 初始化为0
      let totalAmount = 0;
      // 累加
      this.collectionList.forEach(item => {
        totalAmount += item.amount;
      });
      // 返回保留2位小数的金额
      return totalAmount.toFixed(2);
    },

    // 总金额：勾选收款 selectedCollections中amount的sum
    totalAmountOfSelectedCollectionList() {
      // 初始化为0
      let totalAmount = 0;
      // 累加
      this.selectedCollections.forEach(item => {
        totalAmount += item.amount;
      });
      // 返回保留2位小数的金额
      return totalAmount.toFixed(2);
    },


    // 总count：全部收款 collectionList 一共有多少条数据
    totalCountOfCollectionList() {
      return this.collectionList.length;
    },

    // 总count：勾选收款 selectedCollections 一共有多少条数据
    totalCountOfSelectedCollectionList() {
      return this.selectedCollections.length;
    },

    // 计费量 workNum 的sum ： 全部收款 collectionList
    totalWorkNumOfCollectionList() {
      // 创建一个空的Map变量serviceMap，用于存储服务和对应的计费量
      let serviceMap = new Map();

      // 对选中的集合进行遍历
      this.collectionList.forEach(item => {
        // 如果serviceMap中已经存在该服务，则将其计费量累加
        if (serviceMap.has(item.feeServiceName)) {
          serviceMap.set(item.feeServiceName, serviceMap.get(item.feeServiceName) + item.workNum);
        } else {
          // 如果serviceMap中不存在该服务，则将其添加到serviceMap中，并设置初始计费量
          serviceMap.set(item.feeServiceName, item.workNum);
        }
      });

      // 打印serviceMap，用于调试查看结果
      console.log(serviceMap);

      // 创建一个空字符串变量str，用于拼接服务和对应计费量的字符串
      let str = '';

      // 遍历serviceMap中的每一对键值对，将其拼接为指定格式的字符串
      serviceMap.forEach((value, key) => {
        str += `【${key}】：${value}，`;
      });

      // 返回拼接的字符串，去掉末尾的逗号
      return str.substring(0, str.length - 1);
    },

    // 计费量 workNum 的sum ：勾选收款 selectedCollections
    totalWorkNumOfSelectedCollectionList() {
      // 创建一个空的Map变量serviceMap，用于存储服务和对应的计费量
      let serviceMap = new Map();

      // 对选中的集合进行遍历
      this.selectedCollections.forEach(item => {
        // 如果serviceMap中已经存在该服务，则将其计费量累加
        if (serviceMap.has(item.feeServiceName)) {
          serviceMap.set(item.feeServiceName, serviceMap.get(item.feeServiceName) + item.workNum);
        } else {
          // 如果serviceMap中不存在该服务，则将其添加到serviceMap中，并设置初始计费量
          serviceMap.set(item.feeServiceName, item.workNum);
        }
      });

      // 打印serviceMap，用于调试查看结果
      console.log(serviceMap);

      // 创建一个空字符串变量str，用于拼接服务和对应计费量的字符串
      let str = '';

      // 遍历serviceMap中的每一对键值对，将其拼接为指定格式的字符串
      serviceMap.forEach((value, key) => {
        str += `【${key}】：${value}，`;
      });

      // 返回拼接的字符串，去掉末尾的逗号
      return str.substring(0, str.length - 1);
    },


    // 勾选collection的id
    selectedCollectionIds() {
      return this.selectedCollections.map(item => item.billCollectionId);
    },
  },

  created() {
    // 获取收款状态的options
    this.getDicts("CHARGE_ITEM_STATUS").then(res => {
      this.collectionStatusOptions = res.data
    });


  },
  methods: {
    // 把收款状态collectStatus转化为中文
    collectionStatusFormatter(row, column) {
      return this.selectDictLabel(this.collectionStatusOptions, row.collectStatus);
    },

    // 接收2022-10-26T10:55:35.000+08:00 转化为 2022-10-26 10:55:35
    timeFormatter(time) {
      if (time) {
        return time.replace("T", " ").replace(".000+08:00", "");
      }
    },
    // 表格勾选的改变
    handleSelectionChange(selection) {
      // 记录勾选的数据
      this.selectedCollections = selection;

    },
    // 税率taxRate的过滤器，用于表格中的筛选
    taxRateFilter(value, row) {
      return row.taxRate === value
    },
  }
}
</script>
